<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jquery基础</title>
    <style>
        .movediv {
            background: #98bf21;
            height: 100px;
            width: 100px;
            position: absolute;
        }
    </style>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

    </script>

</head>

<body>
    <script>
        // 文档加载完成写法二
        $(function () {
            // 开始写 jQuery 代码...
            $("#toright").click(function () {
                $("div.movediv").animate({ left: '100px' });
            });
            $("#toleft").click(function () {
                $("div.movediv").animate({ left: '0px' });
            });
            $("button").click(function () {
                $("div").animate({
                    left: '250px',
                    opacity: '0.5',
                    height: '150px',
                    width: '150px'
                });
            });
            $("button").click(function () {
                $("div").animate({
                    left: '250px',
                    height: '+=150px',
                    width: '+=150px'
                });
            });
            $("button").click(function () {
                var div = $("div");
                div.animate({ height: '300px', opacity: '0.4' }, "slow");
                div.animate({ width: '300px', opacity: '0.8' }, "slow");
                div.animate({ height: '100px', opacity: '0.4' }, "slow");
                div.animate({ width: '100px', opacity: '0.8' }, "slow");
            });
        });
        
        $("button").click(function () {
            $("p").hide("slow", function () {
                alert("段落现在被隐藏了");
            });
        });
    </script>
    <button id="toright">向右</button>
    <button id="toleft">向左</button>
    <br>
    <br>
    <div class="movediv">
    </div>
</body>

</html>